<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 14:24:22
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-14 14:50:45
 * @FilePath: \jzjy\src\views\DashBoard\searchRes.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="top">
      <div class="topContent">
        <div class="searchInput">
          <input
            type="text"
            placeholder="请输入关键词搜索"
            v-model="value"
            @keyup.enter="searchmsg"
            @focus="getHistory"
            @blur="delHistory"
          />
          <div class="sousuo" @click="searchmsg">
            <span><i class="el-icon-search"></i></span>
            搜索
          </div>
        </div>
        <div class="searchHistory" v-if="historyShow">
          <p>最近搜过</p>
          <ul>
            <li
              v-for="(item, index) in historyList"
              :key="index"
              @click="search(item)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="fenlei">
          <p>当前版本:{{ kemu_title }}{{ kejianversions_title }}</p>
          <div class="tabs">
            <div
              class="tap"
              v-for="item in menus"
              :key="item.id"
              @click="changeTap(item.id)"
              :class="{ chosebigTap: bigtapvalue == item.id }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="ResBox">
        <div class="kejian" v-if="bigtapvalue != 5 && bigtapvalue != 6">
          <div class="box" v-for="item in kejianLists" :key="item.id">
            <div class="left">
              <img
                src="../../assets/img/ziyuan.png"
                v-if="item.lx == 2"
                style="height: 80px"
              />
              <img
                src="../../assets/img/resFile (1).png"
                alt="file_url"
                v-if="
                  item.suffix == 'ppt' ||
                  item.suffix == 'pptx' ||
                  item.suffix == 'ppsx' ||
                  item.suffix == 'pps'
                "
              />
              <img
                src="../../assets/img/resFile (2).png"
                alt="file_url"
                v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
              />
              <img
                src="../../assets/img/resFile (3).png"
                alt="file_url"
                v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
              />
              <img
                src="../../assets/img/resFile (4).png"
                alt="file_url"
                v-if="item.suffix == 'zip' || item.suffix == 'rar'"
              />
              <img
                src="../../assets/img/resFile (5).png"
                alt="file_url"
                v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
              />
              <img
                src="../../assets/img/resFile (6).png"
                alt="file_url"
                v-if="item.suffix == 'doc' || item.suffix == 'docx'"
              />
              <img
                src="../../assets/img/resFile (7).png"
                alt="file_url"
                v-if="item.suffix == 'pdf'"
              />
              <img
                src="../../assets/img/resFile (8).png"
                alt="file_url"
                v-if="item.suffix == 'png' || item.suffix == 'jpg'"
              />
            </div>
            <div class="details">
              <div class="title">
                <h3 @click="gokejianbaoRes(item.id, item.lx, item.suffix)">
                  <img
                    src="../../assets/img/newBiaoqian.png"
                    v-show="item.is_new == 1"
                  />
                  <img src="../../assets/img/ffzyb/vip.png" v-show="item.is_sf == 1" >
                  <span v-if="item.is_tj == 1 && item.is_new != 1">推荐</span>
                  <div
                    class="ceshi"
                    style="width: 450px"
                    v-html="brightenKeyword(item.title, item.wordfcArr)"
                  ></div>
                  <!-- v-html="brightenKeyword(item.title, item.wordfcArr)" -->
                </h3>
              </div>
              <div class="msg">
                <!-- <p v-html="item.intro"></p> -->
                <div class="bottom">
                  <!-- <span class="upTime" v-if="item.from_int != 10">
                  更新于{{ timeStamp2String(item.update_time * 1000, 2) }}
                </span>
                <span
                  class="upTime"
                  v-if="item.from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span> -->
                  <span class="rate"
                    ><span style="margin-right: 5px">精选指数</span>
                    <el-rate disabled v-model="item.tjzs"></el-rate
                  ></span>
                  <span class="seeNum" v-if="!item.lx || item.lx == 1"
                    ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                  >
                  <span class="seeNum" v-if="item.lx == 2"
                    ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                  >
                  <span class="upTime" v-if="getBefore2Year(item.update_time)">
                    {{ timeStamp2String(item.update_time * 1000, 2) }}
                  </span>
                </div>
              </div>
            </div>
            <div class="seeAll">
              <span @click="gokejianbaoRes(item.id)">查看全部</span>
              <div
                class="soucang"
                @click="sckj(item.id)"
                v-if="item.sc_status == 0"
              >
                <img src="../../assets/img/tbsc1.png" />加入收藏
              </div>
              <div
                class="soucang"
                @click="qxsc(item.id)"
                v-if="item.sc_status == 1"
              >
                <img src="../../assets/img/tbsc2.png" />已收藏
              </div>
              <div class="money" v-if="item.is_sf == 0">免费</div>
              <div class="money" v-if="item.is_sf == 1 && item.is_pay == 0"><img src="../../assets/img/money.png">付费资源</div>
              <div class="money" v-if="item.is_sf == 1 && item.is_pay == 1"><img src="../../assets/img/money.png">已解锁</div>
            </div>
          </div>
        </div>
        <!-- 课件列表 教研课和教学课模块-->
        <div class="kejianlist" v-if="kejianLists.length != []">
          <div class="kejianBox" v-if="bigtapvalue == 5">
            <div class="jiaoyan">
              <div
                class="box jiaoyanbox"
                v-for="item in kejianLists"
                :key="item.jyjxkinfo_id"
                @click="goJiaoyanclass(item.jyjxk_id)"
              >
                <img :src="item.fm_file_url" alt="" />
                <div class="activename">
                  {{ item.title }}
                </div>
                <p>主讲人：{{ item.teachers_title }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 课件列表 资源包模块-->
        <div
          class="kejianlist"
          v-if="kejianLists.length != 0 && bigtapvalue == 6"
        >
          <div
            class="ziyuanbaoLists"
            v-for="item in kejianLists"
            :key="item.id"
            @click="gokejianbaoRes(item.id, item.lx, item.suffix)"
          >
            <div class="pic">
              <img src="../../assets/img/ziyuanbaonew.png" />
            </div>
            <div class="msg">
              <div class="kejiantitle">
                <p v-html="brightenKeyword(item.title, item.wordfcArr)"></p>
              </div>
              <div class="ziyuanbaodetails">
                <span>内含：</span>
                <span
                  class="leixing"
                  v-for="list in item.kejianfl_arr"
                  :key="list.kejianfl_id"
                  >{{ list.kejianfl_title }}</span
                >
                <span
                  >共<a>{{ item.kejian_nums }}</a
                  >份资源</span
                >
              </div>
              <div class="bottom">
                <span class="upTime"
                  >更新于{{
                    timeStamp2String(item.update_time * 1000, 2)
                  }}</span
                >
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                >
              </div>
            </div>
            <div class="downLoad">查看全部</div>
          </div>
        </div>
        <div class="nothing" v-if="!fyShow">
          <div class="msg">
            <h3>
               您当前是在<span
                >“ {{ kemu_title }}{{ kejianversions_title }} ”</span
              >进行搜索，搜索结果为 <span>{{ retCounts }}</span>
            </h3>
            <p>
              如果没找到您需要的资源，可以
              <span @click="showTc">快速切换版本</span> 试试哦！
            </p>
          </div>
        </div>
        <div class="page1" v-if="fyShow">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            background
            :page-sizes="[5, 15, 20]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="retCounts"
          >
          </el-pagination>
        </div>
      </div>
      <div class="right">
        <div class="resou">
          <span></span>
          <h2>热门搜索榜</h2>
        </div>
        <ul>
          <li
            v-for="(item, index) in resouLists.slice(0, hotNum)"
            :key="index"
            @click="search(item.title)"
          >
            <span v-if="index == 0" style="background: #f85230">{{
              index + 1
            }}</span>
            <span v-if="index == 1" style="background: #f88e4a">{{
              index + 1
            }}</span>
            <span v-if="index == 2" style="background: #f8cd4a">{{
              index + 1
            }}</span>
            <span v-if="index > 2" style="background: #fff; color: #939599">{{
              index + 1
            }}</span>
            {{ item.title }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 修改科目等信息弹窗 -->
    <el-dialog
      title=""
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :show-close="true"
      center
      width="600px"
    >
      <div class="chose">
        <p>1.请选择您所在的年级：</p>
        <div class="tab1 taps">
          <div
            class="classRadio"
            v-for="item in nianjiList"
            :key="item.id"
            @click="radio3 = item.id"
          >
            <div class="tips1 tips" v-if="radio3 != item.id">
              <span></span>
            </div>
            <div class="tips2 tips" v-if="radio3 == item.id">
              <span></span>
            </div>
            <p>{{ item.title }}</p>
          </div>
        </div>
        <p>2.请选择您所教的学科：</p>
        <div class="tab1 taps">
          <div
            class="classRadio"
            v-for="item in classList"
            :key="item.id"
            @click="changeKemu(item.id)"
          >
            <div class="tips1 tips" v-if="radio1 != item.id">
              <span></span>
            </div>
            <div class="tips2 tips" v-if="radio1 == item.id">
              <span></span>
            </div>
            <p>{{ item.title }}</p>
          </div>
        </div>
        <p>3.请选择您所教学科的教学版本：</p>
        <div class="tab2 taps">
          <div
            class="classRadio"
            v-for="item in banbenList"
            :key="item.id"
            @click="radio2 = item.id"
          >
            <div class="tips1 tips" v-if="radio2 != item.id">
              <span></span>
            </div>
            <div class="tips2 tips" v-if="radio2 == item.id">
              <span></span>
            </div>
            <p>{{ item.title }}</p>
          </div>
        </div>
        <div class="submitSet" @click="submit">
          <span>提交</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  list_kejian,
  nowkemu,
  keywordslists,
  versionslists,
  setnowkemu,
  nianjilists,
  kemulists,
  list_kejianbao,
  list_jyjxk,
  create_accountzysc,
} from "../../api/http";
import { timeStamp2String } from "../../utils/time";
export default {
  inject: ["reload"], //刷新页面
  components: {},
  data() {
    return {
      value: "", //搜索内容
      kejianLists: [], //搜索结果列表
      timeStamp2String,
      retCounts: 0, //总数
      currentPage1: 1, //默认第几页
      page: 1, //页数
      page_size: 5, //meiye duoshao
      kejianversions_id: "", //版本id
      kemu_id: "", //科目id
      nianji_id: "", //年级id
      resouLists: [], //热搜词列表
      fyShow: false, //分页是否展示\
      kemu_title: "", //科目名称
      kejianversions_title: "", //版本名称

      //点击切换科目等信息弹窗相关
      dialogTableVisible: false, //科目弹窗展示
      nianjiList: [], //可选年级列表
      classList: [], //学科列表
      banbenList: [], //版本列表
      radio3: "", //年级值
      radio1: "", //学科值
      radio2: "", //版本值
      menus: [
        { id: "1", title: "全部" },
        // { id: "2", title: "同步资源" },
        // { id: "3", title: "试卷" },
        // { id: "4", title: "素材库" },
        // { id: "5", title: "教学课" },
        // { id: "6", title: "资源包" },
      ], //模块大分类
      bigtapvalue: 1,
      systypes_id: "",
      hotNum: 10, //热门搜索词展示数量
      historyShow: false,
      historyList: [],
    };
  },
  created() {
    //query参数
    console.log(this.$route.query, "query参数");
    this.value = this.$route.query.keyword;
    this.makeHistory(); //记录整理历史搜索记录
    //重定向导航栏active样式
    const str = this.$route.path.split("/");
    this.activeIndex = "/" + str[1];
    // this.getkejianlists(); //搜索课件列表
    //当前科目和版本
    nowkemu({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "当前科目和版本");
      const data = res.retRes;
      this.kejianversions_id = data.kejianversions_id;
      this.kemu_id = data.kemu_id;
      this.radio1 = data.kemu_id;
      this.radio2 = data.kejianversions_id;
      this.radio3 = data.nianji_id;
      this.kemu_title = data.kemu_title;
      this.kejianversions_title = data.kejianversions_title;
      keywordslists({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        kejianversions_id: this.kejianversions_id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "热搜词");
          const arr = res.retRes;
          // if(res.retRes.length >5){
          //   this.resouLists = res.retRes.slice(0,5);
          // }else{
          this.resouLists = res.retRes;
          // }
        }
      });
      this.getcaidan(); //确认分类菜单
      //网址 页面获取数据
      if (this.$route.query.bigtapvalue) {
        this.bigtapvalue = this.$route.query.bigtapvalue;
        this.page = this.$route.query.page ? this.$route.query.page : 1;
        // this.currentPage1 = this.$route.query.page?JSON.parse(this.$route.query.page):1
        this.page_size = this.$route.query.page_size
          ? JSON.parse(this.$route.query.page_size)
          : 5;
        if (this.bigtapvalue == "" || this.bigtapvalue == 1) {
          this.systypes_id = "";
          this.getkejianlists();
        } else if (this.bigtapvalue == 2) {
          this.getkejianlists();
        } else if (this.bigtapvalue == 3) {
          this.systypes_id = 2;
          this.getkejianlists();
        } else if (this.bigtapvalue == 4) {
          this.systypes_id = 3;
          this.getkejianlists();
        } else if (this.bigtapvalue == 5) {
          this.systypes_id = "";
          this.getjxk();
        } else if (this.bigtapvalue == 6) {
          this.bigtapvalue = this.$route.query.bigtapvalue;
          this.getkejianbaolists();
        }
      } else {
        this.bigtapvalue = 1;
        this.systypes_id = "";
        this.getkejianlists();
      }
    });
  },
  methods: {
    //获取两年前今天的时间戳
    getBefore2Year(time) {
      const before2 = new Date().getTime() - 3600 * 24 * 365 * 2 * 1000;
      if (time * 1000 > before2) {
        return true;
      }
    },
    //展开搜索记录
    getHistory() {
      if (this.historyList.length != 0) {
        this.historyShow = true;
      }
    },
    //隐藏搜索记录
    delHistory() {
      setTimeout(() => {
        this.historyShow = false;
      }, 100);
    },
    //记录历史记录
    makeHistory() {
      if (!localStorage.getItem("history")) {
        let arr = [];
        if (this.value) {
          arr.unshift(this.value);
          if (arr.length > 10) {
            arr = arr.slice(0, 10);
            localStorage.setItem("history", JSON.stringify(arr));
            this.historyList = arr;
          } else {
            localStorage.setItem("history", JSON.stringify(arr));
            this.historyList = arr;
          }
        }
      } else {
        // console.log(localStorage.getItem('history'),"有没有历史记录")
        let arr = JSON.parse(localStorage.getItem("history"));
        if (this.value && arr.indexOf(this.value) == -1) {
          arr.unshift(this.value);
          if (arr.length > 10) {
            arr = arr.slice(0, 10);
            localStorage.setItem("history", JSON.stringify(arr));
            this.historyList = arr;
          } else {
            localStorage.setItem("history", JSON.stringify(arr));
            this.historyList = arr;
          }
        } else if (this.value && arr.indexOf(this.value) != -1) {
          arr.splice(arr.indexOf(this.value), 1);
          arr.unshift(this.value);
          if (arr.length > 10) {
            arr = arr.slice(0, 10);
            localStorage.setItem("history", JSON.stringify(arr));
            this.historyList = arr;
          } else {
            localStorage.setItem("history", JSON.stringify(arr));
            this.historyList = arr;
          }
        } else {
          this.historyList = arr;
        }
      }
    },
    //确认菜单内容
    getcaidan() {
      //获取课件类型的分类，确认菜单是否存在同步资源，试卷和素材库
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        title: this.value,
        type_id: this.systypes_id,
        kemu_id: this.kemu_id,
        kejianversions_id: this.kejianversions_id,
        get_fl: "1",
        // of:'time',
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res, "搜索课件分类");
        const data = res.retRes;
        const arr = [];
        this.menus = [{ id: "1", title: "全部" }];
        data.forEach((item) => {
          arr.push(item.type_id);
        });
        // console.log(arr.indexOf('试卷'))
        if (arr.indexOf(1) != -1) {
          this.menus.push({ id: "2", title: "同步资源" });
        }
        if (arr.indexOf(2) != -1) {
          this.menus.push({ id: "3", title: "试卷" });
        }
        if (arr.indexOf(3) != -1) {
          this.menus.push({ id: "4", title: "素材库" });
        }
        //获取教学课，确认菜单是否存在教学课
        list_jyjxk({
          md5key: localStorage.getItem("md5key"),
          title: this.value,
          kemu_id: this.kemu_id,
          nianji_id: this.nianji_id,
          kejianversions_id: this.kejianversions_id,
          jyjxtags_id: 2,
        }).then((res) => {
          if (res.retCounts > 0) {
            this.menus.push({ id: "5", title: "教学课" });
          }
          //获取资源包，确认菜单是否存在资源包
          list_kejianbao({
            md5key: localStorage.getItem("md5key"),
            title: this.value,
            type_id: 1,
            kemu_id: this.kemu_id,
            nianji_ids: this.nianji_id,
            kejianversions_id: this.kejianversions_id, //版本id
          }).then((res) => {
            if (res.retCounts > 0) {
              this.menus.push({ id: "6", title: "资源包" });
            }
          });
        });
      });
    },
    //高亮显示关键字
    brightenKeyword(val, keywords) {
      var pattern = new RegExp("[A-Za-z]+", "g");
      if (keywords.length > 0) {
        val = val + "";
        keywords.forEach(function (item, index) {
          // if (pattern.test(item) & ) {
          //   val = val.replace(
          //     new RegExp(item, "g"),
          //     '<text style="color:red;">' + keywords + "</text>"
          //   );
          // }
            if (
              item.indexOf("(") == -1 &&
              item.indexOf(")") == -1 &&
              item.indexOf("&") == -1 &&
              item.indexOf("-") == -1 &&
              item.indexOf("[") == -1 &&
              item.indexOf("]") == -1 &&
              item.indexOf("+") == -1 &&
              item.indexOf("-") == -1 &&
              item.indexOf("*") == -1 &&
              item.indexOf("%") == -1 &&
              item.indexOf("=") == -1 &&
              item.indexOf(".") == -1 
              // &&item.indexOf(":") == -1 
            ) {
              val = val.replace(
                new RegExp(item, "g"),
                '<text style="color:red;">' + item + "</text>"
              );
            } else {
              console.log("关键词包含英文特殊符号");
            }
        });
        return val;
      } else {
        return val;
      }
    },
    //获取课件列表
    getkejianlists() {
      let loading = this.$loading({
        lock: true,
        text: "拼命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        title: this.value,
        type_id: this.systypes_id,
        kemu_id: this.kemu_id,
        kejianversions_id: this.kejianversions_id,
        // of:'time',
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        // console.log(res, "搜索课件列表");
        loading.close();
        this.kejianLists = [];
        this.kejianLists = res.retRes;
        this.retCounts = res.retCounts;
        if (res.retCounts == 0) {
          this.fyShow = false;
        } else {
          this.fyShow = true;
        }
        // if(res.retRes.length>=4 && res.retRes.length<5){
        //   this.hotNum = 10
        // }else if(res.retRes.length>=5){
        //   this.hotNum = 15
        // }
      });
    },
    //获取教学课
    getjxk() {
      list_jyjxk({
        md5key: localStorage.getItem("md5key"),
        title: this.value,
        kemu_id: this.kemu_id,
        nianji_id: this.nianji_id,
        kejianversions_id: this.kejianversions_id,
        // kejianbooks_id: this.kejianbooks_id,
        // kejianchapters_id: this.kejianchapters_id,
        jyjxtags_id: 2,
        // of: this.classof,
        page: this.page, //页面默认1
        page_size: this.page_size, //默认
      }).then((res) => {
        console.log(res, "教学课列表");
        const data = res.retRes;
        this.kejianLists = data;
        this.retCounts = res.retCounts;
        if (res.retCounts == 0) {
          this.fyShow = false;
        } else {
          this.fyShow = true;
        }
      });
    },
    //获取课件包列表
    getkejianbaolists() {
      let loading = this.$loading({
        lock: true,
        text: "拼命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      list_kejianbao({
        md5key: localStorage.getItem("md5key"),
        title: this.value,
        type_id: 1,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_id: this.kejianversions_id, //版本id
        // kejianbooks_id: this.kejianbooks_id, //初始为当前,点击书本更改
        // kejianchapters_id: this.ziyuanbaochapters_id, //初始为当前,点击目录更改
        page: this.page, //页面默认1
        page_size: this.page_size, //默认20
      }).then((res) => {
        loading.close();
        console.log(res, "资源包列表");
        const data = res.retRes;
        this.kejianLists = data;
        this.retCounts = res.retCounts;
        if (res.retCounts == 0) {
          this.fyShow = false;
        } else {
          this.fyShow = true;
        }
      });
    },
    //
    searchmsg() {
      this.page = 1;
      this.menus = [{ id: "1", title: "全部" }];
      this.bigtapvalue = 1;
      this.systypes_id = "";
      this.getcaidan(); //确认分类菜单
      console.log(this.bigtapvalue);
      this.makeHistory(); //记录整理历史搜索记录
      this.historyShow = false;
      if (this.bigtapvalue == 1) {
        this.systypes_id = "";
        this.getkejianlists();
      } else if (this.bigtapvalue == 2) {
        this.getkejianlists();
      } else if (this.bigtapvalue == 3) {
        this.systypes_id = 2;
        this.getkejianlists();
      } else if (this.bigtapvalue == 4) {
        this.systypes_id = 3;
        this.getkejianlists();
      } else if (this.bigtapvalue == 5) {
        this.systypes_id = "";
        this.getjxk();
      } else if (this.bigtapvalue == 6) {
        this.getkejianbaolists();
      }
      this.$router.push({
        name: "SearchRes",
        query: {
          keyword: this.value,
          bigtapvalue: this.systypes_id,
        },
      });
    },
    //切换大菜单
    changeTap(id) {
      this.bigtapvalue = id;
      this.page = 1;
      // this.currentPage1 = 1;
      // console.log(this.page,this.currentPage1)
      if (id == "" || id == 1) {
        this.systypes_id = "";
        this.getkejianlists();
      } else if (id == 2) {
        this.systypes_id = 1;
        this.getkejianlists();
      } else if (id == 3) {
        this.systypes_id = 2;
        this.getkejianlists();
      } else if (id == 4) {
        this.systypes_id = 3;
        this.getkejianlists();
      } else if (id == 5) {
        this.systypes_id = "";
        this.getjxk();
      } else if (id == 6) {
        this.getkejianbaolists();
      }
      this.$router.push({
        name: "SearchRes",
        query: {
          keyword: this.value,
          bigtapvalue: this.bigtapvalue,
          page: this.page,
        },
      });
    },
    //前往课件详情
    // gokejianbaoRes(id) {
    //   let { href } = this.$router.resolve({
    //     path: "/resource/resDetails",
    //     query: {
    //       id: id,
    //     },
    //   });
    //   window.open(href, "_blank");
    // },
    // goresDetails(id, lx) {
    //   console.log(id, lx);
    //     let { href } = this.$router.resolve({
    //       path: "/resource/resDetails",
    //       query: {
    //         id: id,
    //         gundongTop: document.documentElement.scrollTop,
    //         path: this.$route.path,
    //         routeName: "同步资源",
    //       },
    //     });
    //     window.open(href, "_blank");
    // },
    //点击课件前往课件详情
    gokejianbaoRes(id, lx, suffix) {
      console.log(id, lx);
      //有分类型，并且类型为贝壳资源包
      if (lx && lx == 2 && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/beikeziyuan",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path:
              this.$route.path +
              "?keyword=" +
              this.value +
              "&bigtapvalue=" +
              this.bigtapvalue +
              "&page=" +
              this.page +
              "&page_size=" +
              this.page_size,
            routeName: this.value
              ? "搜索结果： " + JSON.stringify(this.value)
              : "搜索",
            isSearch: 1,
          },
        });
        window.open(href, "_blank");
        //有分类型，并且类型为课件
      } else if (lx && lx == 1 && suffix != "rar" && suffix != "zip") {
        // console.log("推荐课件")
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path:
              this.$route.path +
              "?keyword=" +
              this.value +
              "&bigtapvalue=" +
              this.bigtapvalue +
              "&page=" +
              this.page +
              "&page_size=" +
              this.page_size,
            routeName: this.value
              ? "搜索结果： " + JSON.stringify(this.value)
              : "搜索",
            isSearch: 1,
          },
        });
        window.open(href, "_blank");
        //非推荐，全部为正常课件
      } else if (!lx && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path:
              this.$route.path +
              "?keyword=" +
              this.value +
              "&bigtapvalue=" +
              this.bigtapvalue +
              "&page=" +
              this.page +
              "&page_size=" +
              this.page_size,
            routeName: this.value
              ? "搜索结果： " + JSON.stringify(this.value)
              : "搜索",
            isSearch: 1,
          },
        });
        window.open(href, "_blank");
      } else if (suffix == "rar" || suffix == "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/zipResDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path:
              this.$route.path +
              "?keyword=" +
              this.value +
              "&bigtapvalue=" +
              this.bigtapvalue +
              "&page=" +
              this.page +
              "&page_size=" +
              this.page_size,
            routeName: this.value
              ? "搜索结果： " + JSON.stringify(this.value)
              : "搜索",
            isSearch: 1,
          },
        });
        window.open(href, "_blank");
      }
    },
    //前往校验课内容
    goJiaoyanclass(jyjxk_id) {
      this.$router.push({
        name: "JiaoyanClass",
        query: {
          id: jyjxk_id,
          path:
            this.$route.path +
            "?keyword=" +
            this.value +
            "&bigtapvalue=" +
            this.bigtapvalue +
            "&page=" +
            this.page +
            "&page_size=" +
            this.page_size,
          routeName: this.value
            ? "搜索结果： " + JSON.stringify(this.value)
            : "搜索",
          isSearch: 1,
        },
      });
    },
    //更改每页条数
    handleSizeChange(val) {
      console.log("每页条数调整为", val);
      this.page_size = val;
      this.page = 1;
      // this.currentPage1 = 1;

      if (this.bigtapvalue == "" || this.bigtapvalue == 1) {
        this.systypes_id = "";
        this.getkejianlists();
      } else if (this.bigtapvalue == 2) {
        this.systypes_id = 1;
        this.getkejianlists();
      } else if (this.bigtapvalue == 3) {
        this.systypes_id = 2;
        this.getkejianlists();
      } else if (this.bigtapvalue == 4) {
        this.systypes_id = 3;
        this.getkejianlists();
      } else if (this.bigtapvalue == 5) {
        this.systypes_id = "";
        this.getjxk();
      } else if (this.bigtapvalue == 6) {
        this.getkejianbaolists();
      }
    },
    //更改页数
    handleCurrentChange(val) {
      console.log("当前页为第", val);
      this.mb_page = val;
      this.page = val;
      if (this.bigtapvalue == "" || this.bigtapvalue == 1) {
        this.systypes_id = "";
        this.getkejianlists();
      } else if (this.bigtapvalue == 2) {
        this.systypes_id = 1;
        this.getkejianlists();
      } else if (this.bigtapvalue == 3) {
        this.systypes_id = 2;
        this.getkejianlists();
      } else if (this.bigtapvalue == 4) {
        this.systypes_id = 3;
        this.getkejianlists();
      } else if (this.bigtapvalue == 5) {
        this.systypes_id = "";
        this.getjxk();
      } else if (this.bigtapvalue == 6) {
        this.getkejianbaolists();
      }
    },
    //点击热搜词
    search(title) {
      console.log(123);
      this.$router.push({
        name: "SearchRes",
        query: {
          keyword: title,
        },
      });
      // this.reload(); //刷新页面
      this.value = title;
      this.searchmsg();
    },
    //展示修改科目弹窗
    showTc() {
      //弹窗写好了又变成直接跳转页面了!!!!!!!!!!!!!
      // this.getTkmsg()
      // this.dialogTableVisible = true
      this.$router.push({
        name: "ChangeClass",
      });
    },
    //获取年级科目等信息类容
    getTkmsg() {
      nianjilists({ md5key: localStorage.getItem("md5key") }).then((res) => {
        console.log(res, "年级列表");
        const data = res.retRes;
        if (res.retInt == 1) {
          this.nianjiList = data;
        }
      });
      //获取科目列表
      kemulists({ md5key: localStorage.getItem("md5key") }).then((res) => {
        console.log(res, "科目列表");
        const data = res.retRes;
        if (res.retInt == 1) {
          this.classList = data;
        }
      });
      //获取教学版本列表
      versionslists({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.radio1 ? this.radio1 : "1",
      }).then((res) => {
        console.log(res, "版本列表");
        const data = res.retRes;
        if (res.retInt == 1) {
          this.banbenList = data;
        }
      });
    },
    //切换科目后，版本会更新为选择的科目版本
    changeKemu(id) {
      this.radio1 = id;
      this.radio2 = "";
      //获取教学版本列表
      versionslists({
        kemu_id: this.radio1,
      }).then((res) => {
        console.log(res, "版本列表");
        const data = res.retRes;
        if (res.retInt == 1) {
          this.banbenList = data;
        }
      });
    },
    //提交设置的科目和版本
    submit() {
      console.log(this.radio3, this.radio1, this.radio2);
      if (!this.radio1) {
        this.$message({
          message: "请选择学科",
          duration: 1000,
          showClose: false,
        });
      } else if (!this.radio2) {
        this.$message({
          message: "请选择版本",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.radio3) {
        this.$message({
          message: "请选择年级",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else {
        setnowkemu({
          md5key: localStorage.getItem("md5key"),
          kemu_id: this.radio1,
          kejianversions_id: this.radio2,
          nianji_id: this.radio3,
          is_now: 1,
        }).then((res) => {
          console.log(res, "设置科目版本");
          this.$notify.closeAll();
          this.$notify({
            message: "设置科目和版本成功",
            duration: 2000,
            showClose: false,
          });
          this.dialogTableVisible = false;
        });
      }
    },
    //收藏
    sckj(id) {
      const scarr = [];
      scarr.push(id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: scarr,
        type_id: 1,
        status: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          this.getkejianlists();
        }
      });
    },
    //取消收藏
    qxsc(id) {
      const qxscarr = [];
      qxscarr.push(id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: qxscarr,
        type_id: 1,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          this.getkejianlists();
        }
      });
    },
  },
};
</script>
<style>
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 1200px;
  margin: 0 auto;
}
.el-pagination {
  text-align: left;
  margin: 20px 80px 20px 54px;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
#container {
  .top {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    height: 170px;
    background: #fff;
    // overflow: hidden;
    // border-bottom: 1px solid #E6E6E6;
    .topContent {
      margin: 0 auto;
      width: 1200px;
      .searchInput {
        display: flex;
        align-items: center;
        padding-top: 40px;
        margin-left: 300px;
        margin-bottom: 38px;
        input {
          padding-left: 10px;
          width: 570px;
          height: 48px;
          background: #f5f5f5;
          border: 1px solid #cccccc;
          border-radius: 10px;
          outline: none;
          font-size: 16px;
          color: #666;
        }
        .sousuo {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20px;
          font-size: 16px;
          color: #fff;
          width: 120px;
          height: 48px;
          background: linear-gradient(110deg, #67e5c2, #08a579);
          border-radius: 24px;
          cursor: pointer;
          span {
            margin-right: 4px;
          }
        }
      }
      .searchHistory {
        position: absolute;
        top: 92px;
        margin-left: 300px;
        padding-bottom: 10px;
        width: 600px;
        border: 1px solid #ccc;
        z-index: 10;
        background-color: #fff;
        p {
          margin-left: 10px;
          color: #999;
          font-size: 12px;
          line-height: 28px;
        }
        ul {
          li {
            padding-left: 10px;
            font-size: 14px;
            color: #333;
            line-height: 28px;
            cursor: pointer;
          }
          li:hover {
            background-color: #e8fbf6;
            color: #08a579;
          }
        }
      }
      .fenlei {
        display: flex;
        p {
          color: #333333;
          font-size: 14px;
        }
        .tabs {
          display: flex;
          margin-left: 100px;
          .tap {
            padding-bottom: 14px;
            text-align: center;
            width: 120px;
            color: #999999;
            font-size: 16px;
            cursor: pointer;
          }
          .chosebigTap {
            font-weight: bold;
            color: #333;
            border-bottom: 2px solid #08a570;
          }
        }
      }
    }
  }
  .topTitle {
    width: 1200px;
    margin: 10px auto;
    h1 {
      // margin-bottom: 10px;
      margin: 10px 0;
      font-size: 20px;
    }
    p {
      font-size: 15px;
      color: #666;
      span {
        color: red;
        font-weight: 900;
      }
    }
  }
  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    .ResBox {
      margin-bottom: 20px;
      width: 900px;
      background-color: #fff;
      border-radius: 10px;
      .box {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        border-bottom: 1px dashed #e6e6e6;
        .left {
          margin-right: 40px;
          img {
            width: 74px;
            height: 84px;
          }
        }
        .details {
          position: relative;
          padding-right: 64px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 84px;
          min-width: 60%;
          cursor: pointer;
          border-right: 1px solid #e6e6e6;
          .title {
            display: flex;
            margin: 0;
            margin-bottom: 10px;

            span {
              display: inline-block;
              margin-top: 2px;
              margin-right: 8px;
              text-align: center;
              line-height: 20px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
            }
            h3 {
              display: flex;
              font-weight: normal;
              font-size: 16px;
              color: #333;
              
              img {
                position: relative;
                top: 5px;
                margin-right: 8px;
                width: 36px;
                height: 16px;
              }
              img{
                position: relative;
                top: 3px;
                margin-right: 8px;
                width: 36px;
                height: 20px;
              }
              .ceshi {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
            }
          }
          .msg {
            p {
              font-size: 14px;
              color: #626366;
            }
            .bottom {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #999;
              .upTime {
                margin-left: 38px;
              }
              .seeNum {
                i {
                  margin-right: 5px;
                }
              }
              .rate {
                display: flex;
                margin-right: 38px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
            }
          }
        }
        .details:hover {
          .title {
            h3 {
              color: #08a579;
            }
          }
        }
        .seeAll {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 40px;
          // height: 110px;

          span {
            display: inline-block;
            margin-bottom: 12px;
            width: 96px;
            height: 28px;
            color: #fff;
            text-align: center;
            line-height: 28px;
            background: #08a579;
            border-radius: 14px;
            background: #08a579;
            border-radius: 14px;
            cursor: pointer;
          }
          .soucang {
            cursor: pointer;
            color: #666;
            img {
              position: relative;
              top: 2px;
              margin-right: 6px;
              width: 12px;
            }
          }
          .money{
              margin-top: 5px;
              color: #11AAF9;
              img{
                position: relative;
                top: 2px;
                margin-right: 6px;
                width: 12px;
              }
            }
        }
      }
      //课件类资源样式
      .kejianlist {
        // width: 820px;
        // height: 800px;
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        overflow-y: scroll;
        .kejianBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 30px;
          padding-bottom: 30px;
          border-bottom: 1px dashed #e6e6e6;
          cursor: pointer;
          .kejianfile {
            margin-left: 40px;
            text-align: center;
            // width: 140px;
            // height: 140px;
            // background: linear-gradient(0deg, #e6e6e6, #ffffff);
            // border: 1px solid #ededed;
            img {
              width: 60px;
              height: 68px;
              vertical-align: text-bottom;
            }
          }
          .msg {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 40px;
            height: 68px;
            border-right: 1px solid #e6e6e6;
            cursor: pointer;
            .title {
              width: 460px;
              font-size: 14px;
              font-weight: 900;
              color: #333;
              overflow: hidden;
              white-space: wrap;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3; /*想省略几行就写几*/
              -webkit-box-orient: vertical;
              
              span {
                padding: 0 6px;
                text-align: center;
                color: #fff;
                line-height: 20px;
                font-size: 12px;
                width: 40px;
                height: 20px;
                background: #f85230;
                border-radius: 4px;
              }
            }
            p {
              width: 480px;
              // min-height: 80px;
              line-height: 20px;
              font-size: 13px;
              color: #666;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
            }
            .bottom {
              display: flex;
              align-items: center;
              // position: relative;
              // top: 80px;
              font-size: 12px;
              color: #999;
              .upTime {
                margin-left: 38px;
              }
              .seeNum {
                i {
                  margin-right: 5px;
                }
              }
              .rate {
                display: flex;
                margin-right: 38px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
            }
          }
          .downLoad {
            margin: 0 40px;
            width: 96px;
            height: 28px;
            color: #fff;
            text-align: center;
            line-height: 28px;
            background: #08a579;
            border-radius: 14px;
            background: #08a579;
            border-radius: 14px;
            cursor: pointer;
          }
          .jiaoyan {
            display: flex;
            // justify-content: space-between;
            flex-wrap: wrap;
            // padding: 30px 0 10px 0;
            width: 1200px;
            .jiaoyanbox {
              display: inline-block;
              position: relative;
              padding: 0;
              margin-left: 45px;
              margin-bottom: 30px;
              background-color: #fff;
              border-radius: 10px;
              cursor: pointer;
              img {
                margin-bottom: 10px;
                width: 240px;
                height: 136px;
                border-radius: 10px;
              }
              .activename {
                margin-bottom: 18px;
                width: 240px;
                font-size: 14px;
                color: #333333;
              }
              p {
                position: absolute;
                bottom: -5px;
                font-size: 12px;
                color: #939599;
              }
            }
            .box:hover {
              // transition: 1s;
              img {
                transition: 0.5s;
                // position: relative;
                // top: -10px;
                transform: translateY(-10px);
                box-shadow: 0px 2px 10px 2px #dedede;
              }
              .activename {
                color: #08a579;
              }
            }
          }
        }
        .ziyuanbaoLists {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 850px;
          // background: #f5f7fa;
          // border-radius: 10px;
          border-bottom: 1px dashed #e6e6e6;
          .pic {
            margin: 40px;
            width: 60px;
            img {
              width: 60px;
            }
          }
          .msg {
            position: relative;
            // margin-top: 16px;
            height: 80px;
            border-right: 1px solid #e6e6e6;
            cursor: pointer;
            .kejiantitle {
              font-size: 14px;
              color: #333;
              width: 490px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; // 控制多行的行数
              -webkit-box-orient: vertical;
              p {
                width: 450px;
              }
            }
            .ziyuanbaodetails {
              margin-top: 5px;
              margin-bottom: 14px;
              span {
                color: #626366;
                font-size: 12px;
                a {
                  color: #f6444e;
                }
              }
              .leixing {
                display: inline-block;
                margin: 0 6px;
                width: 40px;
                height: 18px;
                background: #e6edfa;
                border-radius: 2px;
                text-align: center;
                line-height: 18px;
                color: #216efa;
              }
            }
            .bottom {
              // position: absolute;
              // bottom: 5px;
              color: #939599;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
            }
          }
          .downLoad {
            margin: 0 40px;
            width: 96px;
            height: 28px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 28px;
            background: #08a579;
            border-radius: 14px;
            background: #08a579;
            border-radius: 14px;
            cursor: pointer;
          }
        }
        .ziyuanbaoLists:last-child {
          margin-bottom: 20px;
        }
        .ziyuanbaoLists:hover {
          .msg {
            .kejiantitle {
              color: #08a579;
            }
          }
        }
      }
      ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      //课件列表鼠标移动的样式
      .kejianBox:hover {
        .msg {
          .title {
            color: #08a597;
          }
        }
      }
      .nothing {
        // margin: 100px auto;
        // text-align: center;
        width: 900px;
        height: 320px;
        background-image: url("../../assets/img/searchbg.png");
        background-repeat: no-repeat;
        background-size: 100%;
        overflow: hidden;
        .msg {
          margin-top: 73px;
          margin-left: 273px;
          h3 {
            margin-bottom: 18px;
            font-size: 20px;
            color: #08a579;
            span {
              color: #f85230;
            }
          }
          p {
            font-size: 14px;
            color: #969699;
            span {
              color: #08a579;
              // text-decoration: underline;
              border-bottom: 1px solid #08a579;
              cursor: pointer;
            }
          }
        }
      }
    }
    .right {
      margin-left: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      width: 300px;
      height: 480px;
      background-color: #fff;
      .resou {
        display: flex;
        margin-top: 20px;
        span {
          display: inline-block;
          position: relative;
          top: 3px;
          margin-right: 8px;
          width: 4px;
          height: 20px;
          background: #08a579;
          border-radius: 2px;
        }
      }
      ul {
        margin-top: 20px;
        margin-left: 15px;
        li {
          line-height: 40px;
          font-size: 15px;
          cursor: pointer;
          color: #333;
          width: 260px;
          span {
            display: inline-block;
            text-align: center;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: orange;
            font-size: 14px;
            color: #fff;
            font-weight: 600;
          }
        }
        li:hover {
          color: #08a579;
        }
      }
    }
  }
  .chose {
    position: relative;
    margin-left: 40px;
    cursor: pointer;
    p {
      margin: 20px 0;
      margin-bottom: 20px;
      color: #646566;
    }
    .taps {
      display: flex;
      flex-wrap: wrap;
      .classRadio {
        display: flex;
        margin-right: 79px;
        .tips {
          position: relative;
          top: 2px;
          margin-right: 8px;
          width: 14px;
          height: 14px;
          border: 1px solid #cccccc;
          border-radius: 100%;
          line-height: 12px;
          text-align: center;
          span {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 9px;
            height: 9px;
            background-color: #fff;
            border-radius: 100%;
          }
        }
        .tips2 {
          border: 1px solid #08a579;

          span {
            background-color: #08a579;
          }
        }
        p {
          margin: 0;
        }
      }
    }
    .tab2 {
      .classRadio {
        margin-bottom: 10px;
      }
    }
    .submitSet {
      position: absolute;
      right: 20px;
      bottom: -80px;
      width: 120px;
      height: 40px;
      background: #08a579;
      color: #fff;
      border-radius: 6px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
  /deep/.el-dialog--center {
    border-radius: 10px;
    padding-bottom: 80px;
  }
  /deep/.el-dialog__header {
    padding: 0;
  }
}
</style>



